import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Tooltip, Tag, Icon, Divider, Button, Modal, Collapse, Input, List } from 'antd';

import Authorized from '../../../utils/Authorized';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import DescriptionList from '../../../components/DescriptionList';
import styles from './style.less';
import trigon from '../../../assets/trigon.png';

import {
    Pie,
} from 'components/Charts';

const { Secured } = Authorized;
const ButtonGroup = Button.Group;
const { Description } = DescriptionList;
const Panel = Collapse.Panel;

const targetTime = new Date().getTime() + 3900000;

// use permission as a parameter
const havePermissionAsync = new Promise(resolve => {
    // Call resolve on behalf of passed
    setTimeout(() => resolve(), 1000);
});
@Secured(havePermissionAsync)
@connect(({ monitor, loading }) => ({
    monitor,
    loading: loading.models.monitor,
}))
export default class OperationAnalysisDetails extends PureComponent {
    state = {
        question: false,
        proportion: false,
    }


    componentDidMount() {
        this.props.dispatch({
            type: 'monitor/fetchTags',
        });
    }

    handleQuestionClick1 = () => {
        this.setState({ question: true })
    }

    handleQuestionCancel = () => {
        this.setState({ question: false })
    }

    handleQuestionOK = () => {
        this.setState({ question: false })
    }

    handleProportionClick = () => {
        this.setState({ proportion: true })
    }

    handleProportionCancel = () => {
        this.setState({ proportion: false })
    }
    handleProportionOK = () => {
        this.setState({ proportion: false })
    }
    data = [
        'Racing car sprays burning fuel into crowd.',
        'Japanese princess to wed commoner.',
        'Australian walks 100km after outback crash.',
        'Man charged over missing wedding girl.',
        'Los Angeles battles huge wildfires.',
    ];
    render() {
        const { monitor, loading } = this.props;
        const { tags } = monitor;
        const topColResponsiveProps = {
            xs: 24,
            sm: 12,
            md: 12,
            lg: 12,
            xl: 6,
            style: { marginBottom: 24 },
        };
        return (
            <PageHeaderLayout title="站长评级">
                <Fragment>
                    <Card
                        title="渠道信息"
                    // loading={applyLoading}
                    >
                        <DescriptionList col="2">
                            <Description term="公司全称">{"上海云钱"}</Description>
                            <Description term="经销商等级">{"A"}</Description>
                            <Description term="公司简称">{"上海云钱"}</Description>
                            <Description term="所属分公司">{"上海分公司"}</Description>
                            <Description term="负责人">{"李长兴"}</Description>
                            <Description term="联系方式">{"13877945782"}</Description>
                            <Description term="垫资账户">{"033647795146"}</Description>
                            <Description term="开户银行">{"工商银行"}</Description>
                            <Description term="银行账号">{"003478974158"}</Description>
                            <Description term="营业执照">{"87977546971759"}</Description>
                        </DescriptionList>
                    </Card>
                    <Row gutter={24} style={{ marginTop: 30 }}>
                        <Col xl={24} lg={24} sm={24} xs={24}>
                            <Card title="风险罗盘" bordered={false} className={styles.pieCard}>
                                <Row style={{ padding: '16px 0' }} >

                                    <Col span={5} style={{ flexDirection: 'column', display: 'flex' }}>
                                        <Tooltip title="问题解释">
                                            <Tag color="red" style={{ textAlign: 'center', alignSelf: 'center' }}>杠杆率问题</Tag>
                                        </Tooltip>
                                        <Pie
                                            animate={false}
                                            percent={3}
                                            subTitle="在保余额比例"
                                            total="3%"
                                            height={148}
                                            lineWidth={2}
                                        ></Pie>
                                        <Card
                                            size="small"
                                            style={{ width: 160, height: 100, textAlign: 'center', alignSelf: 'center' }}
                                        > <p style={{ marginTop: -10 }}>
                                                环比<img src={trigon} style={{ width: 10, height: 10, marginLeft: 20, marginRight: 5, marginTop: -3 }} />12%
                                        </p><Divider type="horizontal" style={{ marginTop: 0 }} />
                                            <p style={{ marginTop: -10, textAlign: 'center' }}>
                                                上周指数:<span className={styles.trendText} >5%</span>
                                            </p>
                                        </Card>
                                        <ButtonGroup style={{ textAlign: 'center', alignSelf: 'center', marginTop: 20 }}>
                                            <Button
                                                onClick={this.handleQuestionClick1}
                                                type="danger"
                                                style={{  textAlign: 'center' }}>
                                                问题诊断</Button>
                                            <Button type="default" onClick={this.handleProportionClick}>处理意见</Button>
                                        </ButtonGroup>
                                    </Col>

                                    <Col span={5} style={{ flexDirection: 'column', display: 'flex' }}>
                                        <Tooltip title="问题解释">
                                            <Tag color="blue" style={{ textAlign: 'center', alignSelf: 'center' }}>现金流问题</Tag>
                                        </Tooltip>
                                        <Pie
                                            animate={false}
                                            color="orange"
                                            percent={54}
                                            subTitle="L/P"
                                            total="54%"
                                            height={148}
                                            lineWidth={2}
                                        />
                                        <Card
                                            size="small"
                                            style={{ width: 160, height: 100, alignSelf: 'center', textAlign: 'center' }}
                                        > <p style={{ marginTop: -10 }}>
                                                环比<img src={trigon} style={{ width: 10, height: 10, marginLeft: 20, marginRight: 5, marginTop: -3 }} />15%
                                    </p><Divider type="horizontal" style={{ marginTop: 0 }} />
                                            <p style={{ marginTop: -10, textAlign: 'center' }}>
                                                上周指数:<span className={styles.trendText} >42%</span>
                                            </p>
                                        </Card>
                                        <ButtonGroup style={{ textAlign: 'center', alignSelf: 'center', marginTop: 20 }}>
                                            <Button
                                                onClick={this.handleQuestionClick1}
                                                type="danger"
                                                style={{ textAlign: 'center' }}>
                                                问题诊断</Button>
                                            <Button type="default" onClick={this.handleProportionClick}>处理意见</Button>
                                        </ButtonGroup>
                                    </Col>

                                    <Col span={5} style={{ flexDirection: 'column', display: 'flex' }}>
                                        <Tooltip title="问题解释">
                                            <Tag color="blue" style={{ textAlign: 'center', alignSelf: 'center' }}>资产逾期率问题</Tag>
                                        </Tooltip>
                                        <Pie
                                            animate={false}
                                            color="#2FC25B"
                                            percent={19}
                                            subTitle="资产逾期率"
                                            total="19%"
                                            height={148}
                                            lineWidth={2}
                                        />
                                        <Card
                                            size="small"
                                            style={{ width: 160, height: 100, alignSelf: 'center', textAlign: 'center' }}
                                        > <p style={{ marginTop: -10 }}>
                                                环比<img src={trigon} style={{ width: 10, height: 10, marginLeft: 20, marginRight: 5, marginTop: -3 }} />1%
                                    </p><Divider type="horizontal" style={{ marginTop: 0 }} />
                                            <p style={{ marginTop: -10, textAlign: 'center' }}>
                                                上周指数:<span className={styles.trendText} >15%</span>
                                            </p>
                                        </Card>
                                        <ButtonGroup style={{ textAlign: 'center', alignSelf: 'center', marginTop: 20 }}>
                                            <Button
                                                onClick={this.handleQuestionClick1}
                                                type="danger"
                                                style={{ textAlign: 'center' }}>
                                                问题诊断</Button>
                                            <Button type="default" onClick={this.handleProportionClick}>处理意见</Button>
                                        </ButtonGroup>
                                    </Col>

                                    <Col span={5} style={{ flexDirection: 'column', display: 'flex' }}>
                                        <Tooltip title="问题解释">
                                            <Tag color="green" style={{ textAlign: 'center', alignSelf: 'center' }}>资产不良率问题</Tag>
                                        </Tooltip>
                                        <Pie
                                            animate={false}
                                            color="#d81e06"
                                            percent={0.9}
                                            subTitle="资产不良率"
                                            total="0.9%"
                                            height={148}
                                            lineWidth={2}
                                        />
                                        <Card
                                            size="small"
                                            style={{ width: 160, height: 100, alignSelf: 'center', textAlign: 'center' }}
                                        > <p style={{ marginTop: -10 }}>
                                                环比<img src={trigon} style={{ width: 10, height: 10, marginLeft: 20, marginRight: 5, marginTop: -3 }} />6%
                                    </p><Divider type="horizontal" style={{ marginTop: 0 }} />
                                            <p style={{ marginTop: -10, textAlign: 'center' }}>
                                                上周指数:<span className={styles.trendText} >0.8%</span>
                                            </p>
                                        </Card>
                                        <ButtonGroup style={{ textAlign: 'center', alignSelf: 'center', marginTop: 20 }}>
                                            <Button
                                                onClick={this.handleQuestionClick1}
                                                type="danger"
                                                style={{ textAlign: 'center' }}>
                                                问题诊断</Button>
                                            <Button type="default" onClick={this.handleProportionClick}>处理意见</Button>
                                        </ButtonGroup>
                                    </Col>

                                    <Col span={4} style={{ flexDirection: 'column', display: 'flex' }}>
                                        <Tooltip title="经营性问题解释">
                                            <Tag color="green" style={{ textAlign: 'center', alignSelf: 'center' }}>操作风险问题</Tag>
                                        </Tooltip>
                                        <Pie
                                            animate={false}
                                            color="#5DDECF"
                                            percent={5.5}
                                            subTitle="缺陷订单比"
                                            total="5.5%"
                                            height={148}
                                            lineWidth={2}
                                        />
                                        <Card
                                            size="small"
                                            style={{ width: 160, height: 100, alignSelf: 'center', textAlign: 'center' }}
                                        > <p style={{ marginTop: -10 }}>
                                                环比<img src={trigon} style={{ width: 10, height: 10, marginLeft: 20, marginRight: 5, marginTop: -3 }} />4%
                                    </p><Divider type="horizontal" style={{ marginTop: 0 }} />
                                            <p style={{ marginTop: -10, textAlign: 'center' }}>
                                                上周指数:<span className={styles.trendText} >3.9%</span>
                                            </p>
                                        </Card>
                                        <ButtonGroup style={{ textAlign: 'center', alignSelf: 'center', marginTop: 20 }}>
                                            <Button
                                                onClick={this.handleQuestionClick1}
                                                type="danger"
                                                style={{ textAlign: 'center' }}>
                                                问题诊断</Button>
                                            <Button type="default" onClick={this.handleProportionClick}>处理意见</Button>
                                        </ButtonGroup>
                                    </Col>
                                </Row>
                            </Card>
                        </Col>

                    </Row>
                    <Modal
                        title="问题诊断"
                        visible={this.state.question}
                        onCancel={this.handleQuestionCancel}
                        onOk={this.handleQuestionOK}
                    >
                        <Collapse bordered={false} defaultActiveKey={['1']}>
                            <Panel header="历史记录" key="1">
                                <Row><Col>{"sdfsdfsdfsdf是的发顺丰我大的"}</Col></Row>
                                <Row><Col style={{ float: 'right' }}>{"2018-12-09"}</Col></Row>
                            </Panel>
                            <Panel header="历史记录" key="1">
                                <Row><Col>{"sdfsdfsdfsdf是的发顺丰我大的"}</Col></Row>
                                <Row><Col style={{ float: 'right' }}>{"2018-12-09"}</Col></Row>
                            </Panel>
                        </Collapse>
                        <Input placeholder="请输入意见" style={{ marginTop: 30 }}></Input>
                    </Modal>

                    <Modal
                        title="处理意见"
                        visible={this.state.proportion}
                        onCancel={this.handleProportionCancel}
                        onOk={this.handleProportionOK}
                    >
                        <List

                            dataSource={this.data}
                            renderItem={item => (<List.Item>{item}</List.Item>)}
                        />
                    </Modal>
                </Fragment>
            </PageHeaderLayout>
        );
    }
}
